<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>动物的详情信息</title>

    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <link href="/static/css/jquery.slideBox.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="/static/css/show.css">
    <link rel="stylesheet" href="/static/css/style.css">
    <script src="/static/js/jquery-2.2.3.min.js"></script>
    <script src="/static/bootstrap/js/bootstrap.js"></script>
    <script src="/static/js/jquery.slideBox.min.js" type="text/javascript"></script>
    <script src="/static/js/jquery.comment.js"></script>
</head>
<style>
    body {
        background-color: antiquewhite;
    }

    .back {
        float: right;
        padding: 15px;
        border: 1px solid;
        margin-top: -60px;
        margin-right: 50px;
        background-color: antiquewhite;
        border-radius: 10px;
        color: rgb(193, 197, 200);
    }

    .back:hover {
        opacity: 0.5;
    }

    h2 {
        margin-left: 260px;
        border-radius: 10px;
        background-color: antiquewhite;
    }

    .animal .group p {
        bottom: 50px;
    }
    #comment:hover{
        background-color: black;
        opacity: 0.5;
        color: white;
        cursor: pointer;
    }
</style>
<body>
<div>
    <div>

        <h2>待领养的动物</h2>
        <button class="back">返回</button>
        <center>
            <div id="demo1" class="slideBox">
                <ul class="items">
                    <li><a href=""><img class="my-img" src="/static/images/1.jpg"></a></li>
                    <li><a href=""><img class="my-img" src="/static/images/2.jpg"></a></li>
                    <li><a href=""><img class="my-img" src="/static/images/3.jpg"></a></li>
                    <li><a href=""><img class="my-img" src="/static/images/4.jpg"></a></li>
                </ul>
            </div>
            <div class="name">
                <!-- <img src="../images/p8.jpg"> -->
                <span th:text="${aPet.petName}">kitty</span>
            </div>
        </center>
        <div class="animal">
            <div class="group">
                <div class="animalX1">
                    <img src="/static/images/P7.jpg"><span>编号</span><br>
                    <p style="right: 40px;" class="petId" th:text="${aPet.id}">123123</p>
                </div>
                <div class="animalX2">
                    <img src="/static/images/P7.jpg"><span>生日</span><br>
                    <p style="right: 0;">2019/09/23</p>
                </div>
            </div>
            <div class="group">
                <div class="animalX3">
                    <img src="/static/images/P7.jpg"><span>品种</span><br>
                    <p th:text="${aPet.petType}">波斯猫</p>
                </div>
                <div class="animalX4">
                    <img src="/static/images/P7.jpg"><span>性别</span><br>
                    <p>雄性</p>
                </div>
            </div>
            <div class="group">
                <div class="animalX5">
                    <img src="/static/images/P8.jpg"><span>备注</span><br>
                    <p style="right: -90px;" th:text="${aPet.petDescribe}">好动</p>
                </div>
            </div>
        </div>
        <div class="animal_me" style="margin-top:-200px; margin-left:250px;">
            <div class="animal_me1"><img src="/static/images/1.jpg"></div>
            <div class="animal_me2"><p th:text="${aPet.petDescribe}" style="text-indent: 2em; border: 1px solid; margin-top: 30px;" >大家好，我是Salon。我的特徵是一豎一摺的耳朵和會說話的眼神。我非常有活力，最愛和人玩耍逛街做運動。我很喜歡認識朋友，我有自信能和大部份狗狗友好相處。
                我已經準備好當你的好朋友，你能帶我回家給我永遠的溫暖嗎?</p></div>
            <div class="animal_me3"><img src="/static/images/2.jpg"></div>
        </div>
        <div class="my_btn">
            <button style="width: 200px; line-height: 0;" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">想要领养</button>
        </div>
    </div>
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        请填写个人信息
                    </h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="new_department_form" th:action="@{/adopt/addAdoptt}"
                          method="post">

                        <div class="form-group">
                            <label for="new_Name" class="col-sm-2 control-label">
                                领养人姓名： </label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="new_Name"
                                       placeholder="name" name="name">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="new_petName" class="col-sm-2 control-label">
                                动物姓名： </label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="new_petName"
                                       placeholder="petName" name="petName">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="new_Sex" class="col-sm-2 control-label">
                                性别： </label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="new_Sex"
                                       placeholder="sex" name="sex">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="new_tel" class="col-sm-2 control-label">
                                联系方式： </label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="new_tel"
                                       placeholder="telephone" name="telephone">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="new_Email" class="col-sm-2 control-label">
                                邮件： </label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="new_Email"
                                       placeholder="Email" name="email">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="new_Adress" class="col-sm-2 control-label">
                                地址： </label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="new_Adress"
                                       placeholder="adress" name="adress">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="new_remark" class="col-sm-2 control-label">
                                备注： </label>
                            <div class="col-sm-10">
                            <textarea type="text" class="form-control" id="new_remark"
                                      placeholder="remark" name="remark"></textarea>
                            </div>
                        </div>
                        <input type="submit" value="提交申请" class="btn-default" data-dismiss="modal" style="border-radius: 5px;margin: 0 150px; text-align: center;padding: 5px;"></input>
                        <input type="button" class="btn-default" data-dismiss="modal" style="border-radius: 5px;margin: 0 10px; text-align: center; width: 80px;height: 30px;" value="关闭"></input>
                    </form>
                </div>
                <div class="modal-footer">
<!--                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭-->
<!--                    </button>-->
<!--                    <button type="button" class="btn btn-primary">提交申请</button>-->
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <div class="comment-list">

    </div>
    <div class="container">
        <div class="commentbox">
            <textarea cols="80" rows="50" placeholder="来说几句吧......" class="mytextarea" id="content"></textarea>
            <input type="hidden" class="userName" th:value="${session.user.userName}">
            <!--            <div class="btn btn-info pull-right" id="comment">评论</div>-->
            <div  id="comment" style="border-radius: 10px;border: 1px solid;padding: 10px;width: 60px;text-align: center;">评论</div>
        </div>

    </div>
</div>
<script>
    jQuery(function ($) {
        $('#demo1').slideBox();

    });

    $(function () {
        $("#comment").click(function () {
            var obj = new Object();
            obj.img = "./images/img.jpg";
            // obj.replyName="匿名";
            obj.replyName = $(".userName").val();
            obj.content = $("#content").val();
            obj.browse = "深圳";
            obj.osname = "win10";
            obj.replyBody = "";
            $(".comment-list").addCommentList({data: [], add: obj});
            // console.log(obj);
            var json = (({replyName,content}) => {return {replyName,content}})(obj);
            json.petId = parseInt($(".petId").text());
            // console.log(json);

            $.ajax({
                url: "http://localhost:8081/adopt/commjson",
                type: "GET",
                data: json,
                dataType: "JSON",
                contentType: "application/json;charset=utf-8",
                async: true,
                success: function (data) {

                }
            })


        });
        $(".back").on('click', function () {
            history.back();
        })
    })
</script>
</body>
</html>

